<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<flink-svg-container
  [style.visibility]="visibility"
  (transformEvent)="onTransform($event)">
  <svg:g class="graph" #graphElement>
    <defs>
      <svg:marker class="edge-marker" id="end-arrow" viewBox="1 0 10 10" refX="12" refY="3.5" markerWidth="10" markerHeight="10" orient="auto">
        <svg:polygon points="0 0, 10 3.5, 0 7"></svg:polygon>
      </svg:marker>
      <svg:marker class="edge-marker-focus" id="end-arrow-focus" viewBox="1 0 10 10" refX="12" refY="3.5" markerWidth="10" markerHeight="15" orient="auto">
        <svg:polygon points="0 0, 10 3.5, 0 7"></svg:polygon>
      </svg:marker>
    </defs>
    <svg:g #linkElement
      *ngFor="let link of layoutLinks;trackBy:trackByLink"
      class="link-group"
      [id]="link.id">
      <svg:path class="edge" [id]="'link-' + link.id" [class.focused]="link.options?.focused" [attr.marker-end]="'url(#end-arrow' + (link.options?.focused ? '-focus' : '') + ')'">
      </svg:path>
      <svg:text class="edge-label" text-anchor="middle" dy="20">
        <svg:textPath class="text-path" [attr.xlink:href]="'#link-' + link.id" [style.dominant-baseline]="link?.options?.dominantBaseline" startOffset="50%">
          {{link?.detail?.ship_strategy}} {{link?.detail?.local_strategy}}
        </svg:textPath>
      </svg:text>
    </svg:g>
    <svg:g #nodeElement
      *ngFor="let node of layoutNodes;trackBy:trackByNode"
      class="node-group"
      [class.focused]="node.options?.focused"
      [id]="node.id"
      (click)="clickNode(node, $event)"
      (mouseenter)="onNodeMouseEnter($event)"
      (mouseleave)="onNodeMouseLeave($event)">
      <svg:g flink-node [node]="node"></svg:g>
    </svg:g>
    <svg:rect
      #overlayElement
      class="nodes-chart-overlay"
      [class.active]="selectedNodeId"
      transform="scale(999999)"
      x="-1" y="-1" width="2" height="2"></svg:rect>
  </svg:g>
</flink-svg-container>
<nz-slider nzVertical [nzTipFormatter]="null" [nzMin]="0.1" [nzMax]="5" [nzStep]="0.01" [ngModel]="zoom" (ngModelChange)="zoomToLevel($event)"></nz-slider>

